<div style="margin-bottom: 32px;">
  <nz-button-group>
    <button nz-button [nzType]="'primary'"  *ngFor="let timeData of timeDataArr" [nzGhost]="timeData.dataType !== timeDataType" nzSize="large" (click)="timeDataChange(timeData)">
      <span>{{timeData.name}}</span>
    </button>
  </nz-button-group>
  <div style="display: inline-block;margin:0 10px;">
    <label>站点：</label>
    <!--[(ngModel)]="selectedOption"-->
    <nz-select style="min-width: 120px;" [(ngModel)]="rangeCode" nzSize="large"  (nzOpenChange) = 'changeSite($event)'>
      <!--<nz-option nzLabel="&#45;&#45;请选择站点&#45;&#45;" nzValue=""></nz-option>-->
      <nz-option
        *ngFor="let site of siteArr"
        [nzLabel]="site.SITENAME"
        [nzValue]="site.RANGECODE"
      >
      </nz-option>
    </nz-select>
  </div>
  <div style="display: inline-block">
    <span>组分：</span>
    <nz-dropdown nzTrigger="hover" [nzClickHide]="true" (nzVisibleChange)="typeChange($event)">
      <div class="ant-dropdown-link" nz-dropdown
           style="border: 1px solid #aaa4a4;height: 34px;border-radius: 4px;padding: 2px 16px 2px 3px;min-width: 200px;position: relative;">
        <div class="" style="display: inline-block;padding-top: 2px;height: 34px;vertical-align: middle;">
          <ng-template ngFor let-checkObj  [ngForOf]="checkObjArr" let-i="index">
            <button nz-button [nzType]="'primary'" [nzGhost]="true" nzSize="small" *ngIf="i < 3">
              <span>{{checkObj.name}}</span>
              <!--<i class="anticon anticon-close" (click)="updateSingleChecked(componentArr, checkObj.index)"></i>-->
            </button>
          </ng-template>
          <button nz-button [nzType]="'primary'" [nzGhost]="true" nzSize="small" *ngIf="checkObjArr.length > 3">
            <i class="anticon anticon-ellipsis"></i>
          </button>
        </div>
        <i class="anticon anticon-down" style="position: absolute;top: 10px;right: 3px;"></i>
      </div>
      <div nz-dropdown-custom style="position: relative;padding: 10px;color: #333;background: #fff;box-shadow: 0 1px 6px rgba(0,0,0,.2);max-height: 500px;overflow-y: auto;">
       <div style="position: absolute;right: 10px;">
         <!--<button nz-button [nzType]="'primary'" [nzGhost]="true" nzSize="small" (click)="clearAllCheck()">-->
           <!--<span>清除已选</span>-->
         <!--</button>-->
       </div>
        <nz-radio-group [(ngModel)]="compareCom">
          <div *ngFor="let componentData of componentArr; index as i">
                <label nz-radio (click)="updateCom(componentData, 'class')"
                       [nzValue] = 'componentData.value' [nzDisabled]="i === 0">
                  <span>{{componentData.label}}</span>
                </label>
                <div style="margin-left: 22px;">
                  <label *ngFor="let factor of componentData.children"
                         (click)="updateCom(factor, 'factor')"
                         nz-radio [nzValue] = 'factor.value'>
                    <span>{{factor.label}}</span>
                  </label>
                </div>
              <!--<nz-checkbox-group style="display: block;margin-left: 22px;" *ngIf="componentData.hasOwnProperty('children')"-->
                                 <!--[(ngModel)]="componentData.children"-->
                                 <!--(ngModelChange)="updateComCheck(data, [i], 'children')"></nz-checkbox-group>-->
          </div>
        </nz-radio-group>
      </div>
    </nz-dropdown>
  </div>
  <div style="margin:10px 0 0 10px;">
    <div style="display: inline-block;">
      <div style="display: inline-block;">
        <label>开始时间：</label>
        <!--(ngModelChange)="_startDate=$event;_startValueChange()" [ngModel]="_startDate" [nzDisabledDate]="_disabledStartDate" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'Start date'"-->
        <nz-datepicker
          style="width: 228px;" nzSize="large"
          (ngModelChange)="startDate=$event;startValueChange()"
          [ngModel]="startDate"
          [nzDisabledDate]="disabledStartDate"
          [nzShowTime] = 'showTimeParams'
          [nzFormat]='timeFormatter'
          [nzMode] = 'timeMode'
          [nzPlaceHolder]="'开始时间'"></nz-datepicker>
      </div>
      <div style="display: inline-block;margin-right: 10px">
        <label>结束时间：</label>
        <nz-datepicker
          style="width: 228px;" nzSize="large"
          (ngModelChange)="endDate=$event;endValueChange()"
          [ngModel]="endDate"
          [nzDisabledDate]="disabledEndDate"
          [nzShowTime] = 'showTimeParams'
          [nzFormat]='timeFormatter'
          [nzMode] = 'timeMode'
          [nzPlaceHolder]="'结束时间'"></nz-datepicker>
      </div>
    </div>
    <button nz-button [nzType]="'primary'" nzSize="large" (click)="search()">
      <span>查询</span>
    </button>
  </div>
</div>


<!-- 图表 -->
<!--<div class="row">-->
  <!--<div class="col-lg-8" id="coranaCom"></div>-->
  <!--<div class="col-lg-4" id="coranaPie"></div>-->
<!--</div>-->
<div id="coranaPie" style="width: 100%;"></div>



<!--正在加载-->
<!--<div class="one-data-loadState-nomodal" *ngIf="isLoading"></div>-->
